Avant d’apprendre à créer des composants dynamiques avec React, il est utile de comprendre ce qu’il se passe sous le capot. Cela permet de mieux anticiper les comportements parfois surprenants de React, et surtout, de construire des interfaces efficaces.

Commençons par le cœur du moteur : le Virtual DOM.

Le Virtual DOM

Le DOM (Document Object Model) est la structure HTML affichée dans ton navigateur. Modifier ce DOM est coûteux en performance.

React, pour optimiser tout ça, utilise un Virtual DOM : une copie JavaScript du DOM réel. À chaque fois que quelque chose change dans ton composant (un état, une prop), React :

1. Recrée une nouvelle version de cette copie virtuelle
2. Compare l’ancienne version avec la nouvelle
3. Détermine les différences (c’est le diffing algorithm)
4. Applique uniquement les vraies modifications dans le navigateur